<template>
    <div class="main_content">
        <div class="content">
            <!-- <h1>硬件数据</h1> -->
            <div class="search">
                <div class="list">
                    <el-button type="primary" @click="goBack" style="margin-right:20px" size="small" plain>返回</el-button>
                </div>
                <div class="list">
                    <span>硬件SN码:</span>
                    <Input v-model="bound_sn" disabled style="width: 150px;margin-right:20px" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <DatePicker type="datetime" placeholder="请选择起始时间" style="width: 200px;margin-right:20px" v-model="startTime" :clearable="false" @on-change="getStartTime"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                    <span style="width: 30px">至</span>
                    <DatePicker type="datetime" placeholder="请选择截止时间" style="width: 200px;margin-right:20px" v-model="endTime" :clearable="false" @on-change="getEndTime"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <el-button type="primary" @click="searchAll" style="margin-right:20px" size="small" plain>搜索</el-button>
                </div>
                
            </div>
            <div class="table">
                <el-table :data="list" border :height="tableHeight">
                    <el-table-column fixed prop="time" label="硬件时间" width="180"></el-table-column>
                    <el-table-column fixed prop="masterVer" label="版本号" width="100"></el-table-column>
                    <el-table-column prop="name" label="电子围栏名称" width="120"></el-table-column>
                    <el-table-column prop="lng" label="腾讯经度" width="120"></el-table-column>
                    <el-table-column prop="lat" label="腾讯纬度" width="120"></el-table-column>
                    <el-table-column prop="lngWgs84" label="谷歌经度" width="180"></el-table-column>
                    <el-table-column prop="latWgs84" label="谷歌纬度" width="180"></el-table-column>
                    <el-table-column prop="batteryPower" label="电池电量" width="120"></el-table-column>
                    <el-table-column prop="status" label="硬件底板状态" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1">正常</span>
                            <span v-if="scope.row.status == 2">不正常</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="localeState" label="是否在电子围栏内" width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.localeState == 0">否</span>
                            <span v-if="scope.row.localeState == 1">是</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" prop="createTime" label="服务器时间" width="180"></el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <Page v-if="totalCount" :current="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllequip } from "@/api/api.js";
import { formatDate } from "@/sever/utils.js";
export default {
    data() {
        return {
            startTime: new Date(new Date().valueOf() - 7200000),
            endTime:  new Date(),
            bound_sn: "",
            list: [],
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            tableHeight:window.innerHeight - 280 ,
        };
    },
    methods: {
        getStartTime(index){
            this.startTime =index;
        },
        getEndTime(index){
            this.endTime =index;
        },
        goBack() {
            this.$router.go(-1);
        },
        getList(){
            let params = {
                sn: this.bound_sn,
                startTime: formatDate(this.startTime, "yyyy-MM-DD HH:mm:ss"),
                endTime: formatDate(this.endTime, "yyyy-MM-DD HH:mm:ss"),
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            getAllequip(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        searchAll() {
            if (new Date(this.startTime).getTime() > new Date(this.endTime).getTime()) {
                this.$Modal.warning({
                    title: "错误",
                    content: "截至时间不能小于起始时间"
                });
                return;
            }
            this.getList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.searchAll();
        }
    },
    mounted(){
        this.bound_sn = localStorage.getItem("sn");
        this.getList();
    }

};
</script>
<style lang="less" scoped>
@import "./../../assets/style/common.less";
</style>


